<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>MerryGirl</title>
    <link rel="shortcut icon" href="img/favicon.ico">
    <link href="css/base.css" rel="stylesheet" style="text/css" />
    <link href="css/common.css" rel="stylesheet" style="text/css" />
    <link href="css/index.css" rel="stylesheet" style="text/css" />
    <!-- 因为IE8既不支持HTML5也不支持CSS3 Media，需要加载两个JS文件，保证代码实现兼容效果： -->

    <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>

<body>
    <!-- 左侧小吊灯 -->
    <div class="lamp">
        <img src="img/lamp.png" title="永动小吊灯">
    </div>

    <!-- 背景小点点 -->
    <div class="star_all">
        <div class="star"></div>
        <div class="star"></div>
        <div class="star"></div>
        <div class="star"></div>
        <div class="star"></div>
        <div class="star"></div>
        <div class="star"></div>
        <div class="star"></div>
        <div class="star"></div>
        <div class="star"></div>
        <div class="star"></div>
        <div class="star"></div>
        <div class="star"></div>
        <div class="star"></div>
        <div class="star"></div>
        <div class="star"></div>
        <div class="star"></div>
        <div class="star"></div>
        <div class="star"></div>
        <div class="star"></div>
    </div>



    <!-- 内容外部边框 -->
    <div class="out_box">
        <!-- 首部内容 -->
        <header>
            <div class="header_content">
                <!-- 使得盒子为absolute -->
                <div class="content-box">
                    <!-- 首页 -->
                    <div id="main">
                        <span>Welcome</span>
                        <span>这是一只兴趣使然的有名小站</span>
                    </div>
                    <div id="me">
                        <table border="1">
                            <tr>
                                <td>姓名</td>
                                <td>钱敏贵</td>
                            </tr>
                            <tr>
                                <td>住址</td>
                                <td>安徽铜陵</td>
                            </tr>
                            <tr>
                                <td>爱好</td>
                                <td>看动漫</td>
                            </tr>
                            <tr>
                                <td>兴趣</td>
                                <td>画画</td>
                            </tr>
                            <tr>
                                <td>日常</td>
                                <td>宅</td>
                            </tr>
                        </table>
                    </div>
                    <div id="learn">
                        <span>走出半生</span>
                        <span>归来仍是少年</span>
                    </div>
                    <div id="like">
                        <span>水彩&nbsp;&nbsp;手工&nbsp;&nbsp;板绘</span>
                        <br/>
                        <section class="img-box">
                            <img src="img/1.jpg" title="手工：无脸男">
                            <img src="img/3.jpg" title="手工：彩涂松果">
                            <img src="img/5.jpg" title="水彩:金木小天使">
                            <img src="img/6.jpg" title="板绘：王也">
                        </section>
                    </div>
                    <div id="contact">
                        <form method="POST" action="someone.php" ">
                              <input class="top1 " type="text " name="userName " placeholder="姓名 "/><br/>
                              <input type="tel " name="userTel " placeholder="手机号 "/><br/>
                              <textarea rows="10 " cols="30 " placeholder="留言 "></textarea>
                              <br/><button type="button ">发送</button>
                        </form>
                    </div>
                </div>
            </div>
        </header>

        <!-- 底端导航 -->
        <footer>
            <ul>
                <li>
                    <a href="#main ">首页</a>
                </li>
                <li>
                    <a href="#me ">个人介绍</a>
                </li>
                <li>
                    <a href="#learn ">学习经历</a>
                </li>
                <li>
                    <a href="#like ">兴趣使然</a>
                </li>
                <li>
                    <a href="#contact ">联系</a>
                </li>
            </ul>
        </footer>
    </div>
</body>

</html>